<app-page-header [pageHeaderInfo]="pageHeaderInfo" />
<div class="normal-table-wrap">
  <nz-card nzTitle="简单实例，服务器返回的文件地址统一，演示功能不会保存上传的文件">
    <nz-upload [nzAction]="uploadUrl" [nzFileList]="fileList" [nzLimit]="1" [nzName]="'document'" [nzShowButton]="true" [nzSize]="1024 * 5" (nzChange)="handleChange($event)">
      <button nz-button>
        <i nz-icon nzType="upload"></i>
        导入材料(最大测试上传5M)
      </button>
    </nz-upload>
  </nz-card>
  <nz-card class="m-t-20" nzTitle="嵌入表单，加入表单验证">
    <form nz-form nzLayout="vertical" [formGroup]="validateForm">
      <nz-form-item nz-col nzSpan="24">
        <nz-form-control [nzErrorTip]="combineTpl" [nzSm]="6" [nzXs]="24">
          <nz-form-label [nzSm]="14" [nzXs]="24">附件：</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-upload [nzAction]="uploadUrl" [nzFileList]="fileFormList" [nzLimit]="1" [nzName]="'document'" [nzSize]="1024 * 5" (nzChange)="uploadFn($event)">
              <button nz-button>
                <i nz-icon nzType="upload"></i>
                上传附件(最大测试上传5M)
              </button>
              <input formControlName="file" [hidden]="true" />
            </nz-upload>
          </nz-form-control>
        </nz-form-control>
        <nz-form-item class="m-t-20" nz-row>
          <nz-form-control [nzSpan]="14">
            <button nz-button nzType="primary" (click)="submitForm()">提交</button>
            <button class="m-l-10" nz-button nzType="default" (click)="resetForm()">重置</button>
          </nz-form-control>
        </nz-form-item>
      </nz-form-item>
    </form>
  </nz-card>
</div>
<ng-template #combineTpl let-control>
  @if (control.hasError('message')) {
    {{ control.errors.message }}
  }
  @if (control.hasError('required')) {
    必填项
  }
</ng-template>
